<template>
  <div class="information-page">
    <div class="title">
      <p>个人资料</p>
    </div>
    <!--  -->
    <div class="content">
      <div class="avatar">
        <el-upload
          :action="uploadFileUrl"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess"
          :show-file-list="false"
        >
          <el-avatar v-if="img" :src="img" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <p class="p">点击切换头像</p>
      </div>
      <div class="form">
        <el-form
          v-loading="loading"
          :model="formData"
          ref="form"
          label-position="right"
          label-width="84px"
        >
          <div class="info">
            <p>账户资料</p>
            <el-form-item label="用户账户：" style="margin-top: 16px">
              <el-input
                v-model="userName"
                readonly
                style="width: 340px"
              ></el-input>
            </el-form-item>
          </div>
          <div class="info">
            <p>基础资料 <i class="el-icon-edit" @click="change"></i></p>
            <el-form-item label="名字：" prop="name" style="margin-top: 16px">
              <el-input
                v-model="formData.name"
                clearable
                :disabled="isEdit"
                style="width: 340px"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="昵称："
              prop="nickName"
              style="margin-top: 16px"
            >
              <el-input
                ref="input"
                v-model="formData.nickName"
                :disabled="isEdit"
                clearable
                style="width: 340px"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="身份证号："
              prop="idCard"
              label-width="100px"
              style="margin-top: 16px; margin-left: -16px"
            >
              <el-input
                v-model="formData.idCard"
                clearable
                :disabled="isEdit"
                style="width: 340px"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码：" style="margin-top: 16px">
              <el-input v-model="phone" clearable disabled
                        style="width: 340px"
              >{{ formData.phone }}
              </el-input>
            </el-form-item>

            <el-form-item label="邮箱：" prop="email" style="margin-top: 16px">
              <el-input
                v-model="formData.email"
                clearable
                :disabled="isEdit"
                style="width: 340px"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别：" prop="sex" style="margin-top: 16px">
              <el-select
                v-model="formData.sex"
                clearable
                :disabled="isEdit"
                style="width: 340px"
              >
                <el-option
                  v-for="item in sexList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="生日："
              prop="birthday"
              style="margin-top: 16px"
            >
              <el-date-picker
                v-model="formData.birthday"
                :disabled="isEdit"
                style="width: 340px"
              ></el-date-picker>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line import/no-cycle
import { sysUserEdit, userDetail } from '@/api/mallApi/goods'
import { cloud } from '@/framework/utils/request'

export default {
  name: 'InformationPage',
  /* 数据 */
  data() {
    return {
      uploadFileUrl: `${this.baseURL()}/sysFileInfo/upload?secretFlag=N&fileBucket=mall`,
      img: require('./images/avatar.png'),
      isEdit: true,
      edit: true,
      formData: {
        id: '',
        // 用户账户
        account: '',
        // 可用余额
        // availableBalance: '1500',
        // 手机号码
        phone: '',
        // 昵称
        nickName: '',
        // 性别
        sex: '',
        // 生日
        birthday: '',
        // 邮箱
        email: '',
        // 身份证号
        idCard: '',
        // 名字
        name: ''
        // 所在地区
        // area: ['1', '01', '001'],
        // 详细地址
        // address: '1'
      },
      sexList: [
        {
          label: '男',
          value: 'M'
        },
        {
          label: '女',
          value: 'G'
        },
        {
          label: '未知',
          value: 'O'
        }
      ],
      areaList: [
        {
          label: '北京市',
          value: '1',
          children: [
            {
              label: '朝阳区',
              value: '01',
              children: [
                {
                  label: '朝阳街道',
                  value: '001'
                },
                {
                  label: '望京街道',
                  value: '002'
                }
              ]
            }
          ]
        },
        {
          label: '河北省',
          value: '2',
          children: [
            {
              label: '石家庄市',
              value: '01',
              children: [
                {
                  label: '长安区',
                  value: '001'
                },
                {
                  label: '桥西区',
                  value: '002'
                }
              ]
            }
          ]
        }
      ],
      loading: true
    }
  },
  // 计算属性
  computed: {
    // 用户名处理中间四位变成星
    userName() {
      const { account } = this.formData
      return account.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    },
    // 电话号码处理中间四位变成星
    phone: {
      get() {
        // if (!this.isEdit) {
        //   return this.formData.phone
        // } else {
        const { phone } = this.formData
        return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
        // }
      },
      set(val) {
        this.formData.phone = val
      }
    }
  },
  /* 初始化阶段 */
  created() {
    this.getUserDeatil()
  },
  /* 方法 */
  methods: {
    handleAvatarSuccess(res, file, fileList) {
      this.img = file.response.data.fileUrl
      const params = {
        id: this.id,
        img: this.img
      }
      sysUserEdit(params).then((res) => {
        if (res.code === '00000') {
          // 提示修改成功
          this.$message.success('修改成功')
          this.getUserDeatil()
        }
      })
    },
    baseURL() {
      return process.env.VUE_APP_BASE_API + cloud.file
    },
    handleRemove(file, fileList) {},
    // 获取个人资料
    getUserDeatil() {
      userDetail({ id: this.$store.state.user.userId }).then((res) => {
        if (res.code === '00000') {
          this.formData.account = res.data.account
          this.formData.phone = res.data.phone
          this.formData.sex = res.data.sex
          this.formData.birthday = res.data.birthday
          this.formData.nickName = res.data.nickName
          this.formData.email = res.data.email
          this.formData.idCard = res.data.idCard
          this.formData.name = res.data.name
          this.id = res.data.id
          this.img = res.data.img
          this.loading = false
        }
      })
    },
    change() {
      this.isEdit = !this.isEdit
      const params = {
        id: this.id,
        nickName: this.formData.nickName,
        phone: this.formData.phone,
        idCard: this.formData.idCard,
        name: this.formData.name,
        email: this.formData.email,
        birthday: this.formData.birthday,
        sex: this.formData.sex
      }
      if (this.isEdit) this.changeUserInfo(params)
    },
    // 修改用户信息
    changeUserInfo(params) {
      // 判断表单是否通过验证
      this.$refs.form.validate((valid) => {
        if (!valid) return this.$message.error('请填写完整信息')
        sysUserEdit(params).then((res) => {
          if (res.code === '00000') {
            // 提示修改成功
            this.$message.success('修改成功')
            this.getUserDeatil()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.information-page {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  background: #fff;
  height: 1041px;
}

.title {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  background: #fff;
  height: 62px;
  line-height: 62px;
  border-bottom: 1px solid #e9e9e9;

  p {
    margin-left: 24px;
  }
}

.content {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  padding-left: 24px;
  display: flex;

  .avatar {
    width: 112px;
    height: 112px;
    text-align: center;
    margin-top: 28px;

    .img {
      width: 80px;
      height: 80px;
    }

    .p {
      width: 96px;
      height: 24px;
      font-size: 15px;
      color: #000;
      border: none;
    }
  }

  .form {
    ::v-deep .my_input .el-input__inner {
      //color: #be0007;
      font-size: 16px;
      font-weight: 400;
    }

    width: 424px;
    margin-left: 58px;

    .info {
      margin-top: 28px;

      p {
        font-weight: 700;
        font-size: 18px;
        color: #000;

        i {
          color: #1289ff;
          margin-left: 324px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
